// Place all the styles related to the strategy controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

/* Footer */

.footer {
  @include setFontSize($size-18);

  margin-top: auto;
  width: 100%;
  background: $black-50;
  color: $white;

  a {
    @include standardTransition();

    color: $white;
    text-decoration: none;

    &:hover,
    &:focus {
      opacity: 0.5;
    }
  }

  &Links {
    max-width: 1200px;
    margin: 0 auto;
    padding: 66px 34px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid $white-20;

    a {
      @include setMargin($size-0, $size-0, $size-10, $size-0);

      display: block;
    }

    a:last-of-type {
      margin-bottom: $size-0;
    }

    &Title {
      @include setFontSize($size-16);
      @include setMargin($size-0, $size-0, $size-10, $size-0);

      color: $white-80;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    > div:last-of-type {
      text-align: right;
    }

    @media screen and (max-width: $medium) {
      padding: 33px 20px;
      flex-direction: column;
      justify-content: flex-start;

      > div {
        padding: $size-10 0;
        text-align: center;
      }

      > div:nth-of-type(2n),
      > div:nth-of-type(3n) {
        @include setMargin($size-20, $size-0, $size-0, $size-0);

        text-align: center;
      }
    }
  }

  &Emergency {
    @include setMargin($size-0, $size-0, $size-40, $size-0);
    @include setPadding($size-40, $size-34, $size-0, $size-34);

    text-align: center;
  }

  &Extras {
    max-width: 1200px;
    margin: 0 auto;
    padding: $size-0 34px 66px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    @media screen and (max-width: $medium) {
      padding: $size-0 20px 33px;
      flex-direction: column;
      justify-content: flex-start;

      > div:first-of-type {
        width: 100%;
      }

      > div:last-of-type {
        @include setMargin($size-20, $size-0, $size-0, $size-0);
      }
    }
  }

  &Dpga {
    background: url('/assets/partners/dpga.svg');
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    background-size: 100px 50px;
    float: right;

    @media screen and (max-width: $medium) {
      float: none;
      margin: 0 auto;
    }
  }
}
